import type { FC, PropsWithChildren } from 'react'
import Icon from '../../../Icon'
import View from '../../../common/View'
import { getRgb, initvalue } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor'
import { useModelMargin } from '../../../common/hooks/useModelMargin'
import { context } from '../../../common/context'

const Index: FC<PropsWithChildren<{ name: string }>> = ({ children, name }) => {
  const { resume: { content, customization }, fontScale } = context

  const { spacing, applyAccentColor, title } = customization

  const { showIcon, style, titleBkg: bkg } = title || {}
  const { fontSize } = spacing
  const titleFontSize = `${((fontSize || 0) * 0.5 + initvalue.fontSize + 3) * fontScale}pt`
  let item = content[name]
  if (name === 'basicInfo') {
    item = {
      displayName: '个人信息',
      iconKey: 'comment'
    }
  }
  const styles: any = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '4px',
    fontSize: titleFontSize,
    paddingBottom: '5px',
    paddingTop: '3px',
    color: '#fff',
    position: 'relative',
    zIndex: 22
  }

  const [color, position] = useAccentColor(name)
  if (applyAccentColor?.includes('headings') && position) {
    styles.color = color
  }
  let titleBkg = null
  let borderBottomColor = `currentColor`
  if (bkg) {
    titleBkg = getRgb(bkg)
    borderBottomColor = getRgb(bkg)
  }
  const margin = useModelMargin({})
  return (<View>
    <h3 style={{ ...styles, margin, marginRight: 0, marginLeft: 0 }}>
      {
        children || <>
          {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
          {item?.displayName}
        </>
      }
    </h3>

  </View>)
}
export default Index
